<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="common/css/common.css">
    <link rel="stylesheet" href="css/groupStyle.css">
    <link rel="stylesheet" href="common/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="common/iconfont/iconfont.css"/>

    <link href="common/css/layout.min.css" rel="stylesheet"/>
    <link href="common/css/scs.min.css" rel="stylesheet"/>
    <title>落地页</title>
    <style type="text/css">
        #city {
            position: absolute;
            width: 80%;
            left: 22%;
            border: none;
        }

        ._citys {
            width: 100%;
            display: inline-block;
            border: 2px solid #eee;
            border-bottom: none;
            padding: 5px;
            position: relative;
        }

        ._citys span {
            color: #56b4f8;
            height: 15px;
            width: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            position: absolute;
            right: 10px;
            top: 10px;
            border: 1px solid #56b4f8;
            cursor: pointer;
        }

        ._citys0 {
            width: 100%;
            height: 34px;
            display: inline-block;
            border-bottom: 2px solid #56b4f8;
            padding: 0;
            margin: 0;
        }

        ._citys0 li {
            display: inline-block;
            line-height: 34px;
            font-size: 15px;
            color: #888;
            width: 80px;
            text-align: center;
            cursor: pointer;
        }

        .citySel {
            background-color: #56b4f8;
            color: #fff !important;
        }

        ._citys1 {
            width: 100%;
            display: inline-block;
            padding: 10px 0;
        }

        ._citys1 a {
            width: 70px;
            height: 25px;
            display: inline-block;
            color: #666;
            margin-top: 3px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
            font-size: 10px;
            overflow: hidden;
        }

        ._citys1 a:hover {
            color: #fff;
            background-color: #56b4f8;
        }

        .AreaS {
            background-color: #56b4f8 !important;
            color: #fff !important;
        }

    </style>
</head>
<body>
<!--共用头部 head-->
<template data-src="layout/header.html"></template>

<div id="myCarousel" class="carousel slide clearfix" data-ride="carousel">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators my-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/carousel.png" alt="First slide" width="80%"
                 style="text-align: center;display: block;margin: auto;">
        </div>
        <div class="item">
            <img src="images/carousel.png" alt="Second slide" width="80%"
                 style="text-align: center;display: block;margin: auto;">
        </div>
        <div class="item">
            <img src="images/carousel.png" alt="Third slide" width="80%"
                 style="text-align: center;display: block;margin: auto;">
        </div>
        <div class="item">
            <img src="images/carousel.png" alt="Third slide" width="80%"
                 style="text-align: center;display: block;margin: auto;">
        </div>
        <div class="item">
            <img src="images/carousel.png" alt="Third slide" width="80%"
                 style="text-align: center;display: block;margin: auto;">
        </div>
    </div>
    <div class="count-down">
        <div class="count-member">3人拼团价</div>
        <div class="clearfix">
            <div class="fl">
                <p class="group-sum">￥<span>15.00</span></p>
                <p class="former-sum">￥<s>22.00</s></p>
            </div>
            <div class="fr count-time">
                <p>距结束仅剩</p>
                <p class="detail-time">
                    <a>7</a>天<a>0</a>时<a>0</a>分<a>0</a>秒
                </p>
            </div>
        </div>
    </div>
</div>
<div class="good-introduced clearfix">
    <p>口水娃 零食大礼包 多口味组合装兰花豆蚕豆大礼包</p>
    <span>240g/袋</span>
</div>
<div class="grey-bg"></div>
<div class="clearfix shipping-address">
    <span class="fl">送至<i class="icon iconfont">&#xe614;</i><a>上海浦东新区</a></span>
    <i class="iconfont icon fr">&#xe6ca;</i>
</div>
<div class="grey-bg"></div>
<div>
    <img src="images/detail1.png" alt="" width="100%">
</div>

<div class=" clearfix middle-wrap">
    <div class="fl goodSingle">
        <img src="images/detail2.jpg" width="100%">
    </div>
    <div class="fr goodContent">
        <p><span>品牌名称：</span><span>口水娃</span></p>
        <p><span>商品名称：</span><span>兰花豆多口味组合装</span></p>
        <p><span>净含量：</span><span>240g</span></p>
        <p><span>配料表：</span><span>蚕豆、白砂糖、植物油、食用盐、香辛料等</span></p>
        <p><span>保质期：</span><span>12个月</span></p>
        <p><span>产品标准号：</span><span>GB/T 22165</span></p>
        <p><span>贮存方式：</span><span>请置于阴凉干燥处</span></p>
    </div>
</div>

<div>
    <img src="images/detail3.png" alt="" width="100%">
</div>
<div class="grey-bg"></div>
<div>
    <img src="images/detail4.png" alt="" width="100%">
</div>
<div class="grey-bg"></div>
<div>
    <img src="images/detail5.png" alt="" width="100%">
</div>
<div class="grey-bg"></div>
<div class=" compony-content">
    <img src="images/company.png" alt="" width="100%">
</div>
<div class="popup-btn clearfix">
    <a class="single-buy">￥22.00单买</a>
    <a class="group-buy">￥15.00开团</a>
</div>
<div class="popup-btn clearfix" style="display: none">
    <a class="single-buy no-stock">￥22.00单买</a>
    <a class="group-buy out-stock">￥15.00开团</a>
</div>

<div class="popup goods-popup" style="display: none">
    <div class="popup-con">
        <div class="clearfix good-info ">
            <!--<div class="content-img"></div>-->
            <img src="images/good-single.png" class="content-img">
            <div class="good-price fl">
                <p class="text-wrap">￥39.99鲜花订购-睡莲</p>
                <p class="font-first">团购价：￥9.99</p>
            </div>
            <i class="close-btn fr icon iconfont">&#xe608;</i>
        </div>

        <div class="clearfix relate-info ">
            <p>
                <span>配送方式</span>
                <span class="fr">快递</span></p>
        </div>
        <div class="clearfix relate-info">
            <p class="text-left">收货人姓名</p>
        </div>
        <div class="clearfix relate-info">
            <p>手机号码</p>
        </div>
        <div class="clearfix relate-info">
            <!--<p id="myAddrs" data-key="4-84-1298">所在地区<span class="fr icon iconfont">&#xe6ca;</span></p>-->
            <p id="" data-key="4-84-1298" class="rel">
                <span class="hide-text">所在地区</span>
                <input type="text" id="city">
                <span class="fr icon iconfont">&#xe6ca;</span>
            </p>
        </div>
        <div class="clearfix relate-info">
            <p>详细地址</p>
        </div>
        <div class="input-check clearfix">
            <span class="check-box">
                <input type="checkbox" id="explainAgree">
                <span class="check-style iconfont">&#xe613;</span>
            </span>
            <label for="explainAgree" class="clearfix">
                <span>本人同意成为taiping用户，并接受以下<a>用户协议</a>。</span>
            </label>
        </div>

    </div>
    <div class="popup-btn clearfix">
        <a class="sum-btn">合计：￥15.00</a>
        <a class="order-btn">提交订单</a>
    </div>
    <!--<div style="width:420px;margin:40px auto;">-->
    <!--<input type="text" id="city" />-->
    <!--</div>-->
</div>

<div class="popup popup-rule" style="display: none">
    <div class="rule">
        <div class="rule-title">
            <img src="images/shape-copy.png" alt="">
            <span>活动规则</span>
        </div>
        <div class="close-wrap">
            <img src="images/ellipse.png" alt="">
            <i class="icon iconfont">&#xe635;</i>
        </div>
        <div class="popup-content">
            <p>活动奖品</p>
            <span>鲜花预定-睡莲</span>
            <p>活动时间</p>
            <span>2017年8月1日-2017年8月10日</span>
            <p>活动流程</p>
            <img src="images/activity-flow.png" alt="">
            <span class="limit">*每个宝贝每人限购一件</span>
            <p>主办单位</p>
            <p class="good-delivery">太平电子商务有限公司</p>
        </div>
    </div>
</div>

<!--已抢光遮罩-->
<!--<div class="index-popup">-->
<!--<div class="popup-image">-->
<!--<img src="images/loot-all.png" alt="">-->
<!--</div>-->
<!--</div>-->


<script src="common/jquery/jquery.min.js"></script>
<script src="common/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="common/js/template.js"></script>
<script type="text/javascript" src="common/js/common.js"></script>

<script src="common/js/Popt.js"></script>
<script src="common/js/cityJson.js"></script>
<script src="common/js/citySet.js"></script>

<!--<script src="common/js/jquery.scs.min.js"></script>-->
<!--<script src="common/js/CNAddrArr.min.js"></script>-->

<script>
    foo.onload = function (w, l) {
        console.log('可以在此处回调，w指window，l指loadJs')
    };
    foo.start()

    $("#city").click(function (e) {
        SelCity(this, e);
    });


    //    $(function () {
    //        /**
    //         * 通过数组id获取地址列表数组
    //         *
    //         * @param {Number} id
    //         * @return {Array}
    //         */
    //        function getAddrsArrayById(id) {
    //            var results = [];
    //            if (addr_arr[id] != undefined)
    //                addr_arr[id].forEach(function (subArr) {
    //                    results.push({
    //                        key: subArr[0],
    //                        val: subArr[1]
    //                    });
    //                });
    //            else {
    //                return;
    //            }
    //            return results;
    //        }
    //
    //        /**
    //         * 通过开始的key获取开始时应该选中开始数组中哪个元素
    //         *
    //         * @param {Array} StartArr
    //         * @param {Number|String} key
    //         * @return {Number}
    //         */
    //        function getStartIndexByKeyFromStartArr(startArr, key) {
    //            var result = 0;
    //            if (startArr != undefined)
    //                startArr.forEach(function (obj, index) {
    //                    if (obj.key == key) {
    //                        result = index;
    //                        return false;
    //                    }
    //                });
    //            return result;
    //        }
    //
    //        //bind the click event for 'input' element
    //        $("#myAddrs").click(function () {
    //            var PROVINCES = [],
    //                startCities = [],
    //                startDists = [];
    //            //Province data，shall never change.
    //            addr_arr[0].forEach(function (prov) {
    //                PROVINCES.push({
    //                    key: prov[0],
    //                    val: prov[1]
    //                });
    //            });
    //            //init other data.
    //            var $input = $(this),
    //                dataKey = $input.attr("data-key"),
    //                provKey = 1, //default province 北京
    //                cityKey = 36, //default city 北京
    //                distKey = 37, //default district 北京东城区
    //                distStartIndex = 0, //default 0
    //                cityStartIndex = 0, //default 0
    //                provStartIndex = 0; //default 0
    //
    //            if (dataKey != "" && dataKey != undefined) {
    //                var sArr = dataKey.split("-");
    //                if (sArr.length == 3) {
    //                    provKey = sArr[0];
    //                    cityKey = sArr[1];
    //                    distKey = sArr[2];
    //
    //                } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
    //                    provKey = sArr[0];
    //                    cityKey = sArr[1];
    //                }
    //                startCities = getAddrsArrayById(provKey);
    //                startDists = getAddrsArrayById(cityKey);
    //                provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
    //                cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
    //                distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
    //            }
    //            var navArr = [{//3 scrollers, and the title and id will be as follows:
    //                title: "省",
    //                id: "scs_items_prov"
    //            }, {
    //                title: "市",
    //                id: "scs_items_city"
    //            }, {
    //                title: "区",
    //                id: "scs_items_dist"
    //            }];
    //            SCS.init({
    //                navArr: navArr,
    //                onOk: function (selectedKey, selectedValue) {
    //                    $input.val(selectedValue).attr("data-key", selectedKey);
    //                }
    //            });
    //            var distScroller = new SCS.scrollCascadeSelect({
    //                el: "#" + navArr[2].id,
    //                dataArr: startDists,
    //                startIndex: distStartIndex
    //            });
    //            var cityScroller = new SCS.scrollCascadeSelect({
    //                el: "#" + navArr[1].id,
    //                dataArr: startCities,
    //                startIndex: cityStartIndex,
    //                onChange: function (selectedItem, selectedIndex) {
    //                    distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
    //                }
    //            });
    //            var provScroller = new SCS.scrollCascadeSelect({
    //                el: "#" + navArr[0].id,
    //                dataArr: PROVINCES,
    //                startIndex: provStartIndex,
    //                onChange: function (selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
    //                    cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
    //                    distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
    //                }
    //            });
    //        });
    //    });

</script>
</body>
</html>